<!-- 货币汇率 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" :showSet="false" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @reset="onHideDetails(true)">
    <template #form>
      <el-form-item label="货币名称:">
        <el-input class="width200" v-model="data.query.name" placeholder="请输入" clearable/>
      </el-form-item>
      <el-form-item label="货币注释:">
        <el-input class="width200" v-model="data.query.remark" placeholder="请输入" clearable/>
      </el-form-item>
    </template>
    <template #button></template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width">
          <template v-if="item.prop == 'name'" #default="scope">
            {{ scope.row.name }}【{{ scope.row.symbol }}】({{ scope.row.remark }})
          </template>
          <template v-if="item.prop == 'character'" #default="scope">
            ⇋
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" label="设置汇率" width="150" align="center">
        <template #default="scope">
          <el-button type="warning" v-permiss="'/system/destroyManager'" size="small" @click="checkDetails(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 汇率换算 -->
  <el-dialog v-model="data.isShowDetails" title="货币汇率" :close-on-click-modal="false" :close-on-press-escape="false"
    width="50%" top="25vh" @close="onHideDetails">
    <form-item title="货币汇率" :pass="true" value="overloadTable">
      <el-input-number class="width240" v-model="data.exchange_rate" :min="0.0000000001" :max="99999999999999" :precision="9" placeholder="请输入货币汇率" clearable controls-position="right" />
    </form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="onHideDetails(false)">取 消</el-button>
        <el-button type="primary" @click="exchangeRate">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { getExchangeList, editExchange } from '@/api/config'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    name: '',
    remark: '',
  },
  list: [],
  total: 0,
  fields: [
    { label: '货币ID', prop: 'currency_id', width: '150', visible: true },
    { label: '货币名称【货币符号】(注释)', prop: 'name', width: '', visible: true },
    { label: '换算', prop: 'character', width: '80', visible: true },
    { label: 'USDT', prop: 'usdt_exchange_rate', width: '', visible: true },
  ],
  exchange_rate: 0,
  dialogVisible: false,
  isShowDetails: false,
  checkedItem: {} as any,
})

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  let query = JSON.parse(JSON.stringify(data.query))
  let res = await getExchangeList(query)
  data.list = res.data.list
  data.total = res.data.total
}

// 详情
const checkDetails = async (row: any) => {
  data.isShowDetails = true
  data.checkedItem = row
  data.exchange_rate = row.usdt_exchange_rate
}

// 修改汇率
const exchangeRate = async () => {
  data.isShowDetails = true
  let query = JSON.stringify(data.exchange_rate)
  if(!data.exchange_rate || data.exchange_rate<0){
    return ElMessage.error('请输入正确的汇率')
  }
  ElMessageBox.confirm(`是否修改【${data.checkedItem.currency_id}】${data.checkedItem.name}(${data.checkedItem.symbol})的汇率为【${query}】`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    await editExchange({
      id:data.checkedItem.id,
      usdt_exchange_rate:Number(data.exchange_rate)
    })
    ElMessage.success('修改成功')
    indexStore.getExchange() //货币汇率汇总
    onHideDetails(true)
  }).catch(() => { })
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
}
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}

// 重置
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  data.isShowDetails = false
  data.checkedItem = {} as any
  data.query = {
    page: data.query.page,
    size: data.query.size,
    name: data.query.name,
    remark: data.query.remark,
  }
  if (show) {
    data.query = {
      page: 1,
      size: 50,
      name: '',
      remark: '',
    }
    getSearchList()
  }
}
</script>

<style lang="scss" scoped></style>
